<template>
	<view>
		<u-navbar title="申请开票" @leftClick="leftClick" :placeholder="true" :autoBack="true">
			<view class="u-nav-slot" slot="left">
				<u-icon name="close" size="19"></u-icon>
			</view>
		</u-navbar>
		<view v-if="!realAuthInfo || [3,4].includes(realAuthInfo.status)">
			<view class="shimingTips">
				<view>您当前还未实名认证，请先实名认证</view>
				<view class="shimingTips-right">
					<view @click="toAuth">
						前往认证 >
					</view>
				</view>
			</view>
		</view>
		<view class="page">
			<view class="content">
				<view class="content_top" @click="toList">
					<view class="content_top_left">
						<image src="/static/reCharge/record.png" mode="widthFix" style="width: 44rpx"></image>
						<text class="text">开票记录</text>
					</view>
					<image src="/static/reCharge/icon_list_next@2x.png" mode="widthFix" style="width: 30rpx"></image>
				</view>
				<view class="content_box">
					<u--form labelPosition="left" :model="model" :rules="rules" ref="uForm" :borderBottom="false"
						:labelWidth="100">
						<u-form-item label="支付类型" prop="payType" @click="showPop('payType')">
							<u--input disabled inputAlign="right" v-model="model.payType" disabledColor="#ffffff" placeholder="请选择"
								placeholderClass="placeholder" border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="消费类型" prop="consumeType" @click="showPop('consumeType')">
							<u--input disabled inputAlign="right" v-model="model.consumeType" disabledColor="#ffffff"
								placeholder="请选择" placeholderClass="placeholder" border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="年份" prop="year" @click="showPop('year')">
							<u--input disabled inputAlign="right" v-model="model.year" disabledColor="#ffffff" placeholder="请选择"
								placeholderClass="placeholder" border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="季度" prop="quarter" @click="showPop('quarter')">
							<u--input disabled inputAlign="right" v-model="model.quarter" disabledColor="#ffffff" placeholder="请选择"
								placeholderClass="placeholder" border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
					</u--form>
				</view>
				<text class="tip">注意：此处只展示最终消费记录，冻结金额不在此展示。</text>
				<view class="content_box">
					<view>
						<view v-if="dataSource.length != 0">
							<view class="item"
								:class="[new Date(item.applyAt).getTime() < new Date('2024-06-01 00:00:00').getTime() ? 'bg-color' : null]"
								v-for="(item, index) in dataSource" :key="index">
								<view class="item_left">
									<text class="name">{{ operationType[item.operationType]|| "-"}}</text>
									<text class="time" v-if="modelValue.consumeType == '01'">新车车架号：{{ item.vinNumber || "-"}}</text>
									<text class="time">支付时间：{{ item.applyAt }}</text>
								</view>
								<text class="price">{{ Math.abs(item.changeAmount) }}元</text>
							</view>
						</view>
						<view v-else>
							<u-empty mode="data"></u-empty>
						</view>
					</view>
					<view v-if="loading">
						<u-loading-icon text="加载中..." :vertical="true"></u-loading-icon>
					</view>
				</view>
			</view>
			<view style="height: 140rpx;"></view>
			<view class="bottom">
				<view class="bottom_left">
					{{orderNum}} 个订单，共
					<text class="price"> {{totalPrice}} 元</text>
				</view>
				<button class="btn" @click="next">下一步</button>
			</view>
			<!-- <popup ref="popup" @select="select"></popup> -->
			<u-picker :show="show == 'payType'" v-if="show == 'payType'" @cancel="show = ''" title="支付类型" :keyName="'label'"
				:columns="columns1" @confirm="handleConfirm('payType',$event)" ref="uPicker1"></u-picker>

			<u-picker :show="show == 'consumeType'" v-if="show == 'consumeType'" @cancel="show = ''" title="消费类型"
				keyName="label" :columns="columns2" @confirm="handleConfirm('consumeType',$event)" ref="uPicker2"></u-picker>

			<u-picker :show="show == 'year'" v-if="show == 'year'" @cancel="show = ''" title="年份" keyName="label"
				:columns="columns3" @confirm="handleConfirm('year',$event)" :defaultIndex="defaultIndex"
				ref="uPicker3"></u-picker>

			<u-picker :show="show == 'quarter'" v-if="show == 'quarter'" @cancel="show = ''" title="季度" keyName="label"
				:columns="columns4" @confirm="handleConfirm('quarter',$event)" ref="uPicker4"></u-picker>
		</view>

	</view>
</template>

<script>
	import webUni from "@/common/uni.webview.1.5.2.js";
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				model: {},
				modelValue: {},
				rules: {},
				dataSource: [],
				show: false,
				columns1: [
					[{
							label: '公对公转账余额',
							value: 2
						},
						{
							label: '微信充值余额',
							value: 1
						},
					]
				],
				columns2: [
					[
						// 	{
						// 	label: '全部',
						// 	value: 1
						// },
						{
							label: '置换申请',
							value: '01'
						}, {
							label: '维保查询',
							value: '02'
						}, {
							label: '出险查询',
							value: '03'
						},
					]
				],
				columns3: [

				],
				columns4: [
					[{
						label: '第一季度',
						value: 1
					}, {
						label: '第二季度',
						value: 2
					}, {
						label: '第三季度',
						value: 3
					}, {
						label: '第四季度',
						value: 4
					}]
				],
				operationType: {
					"20": "置换申请",
					"21": "维保查询",
					"22": "出险查询",
					"24": "解冻",
				},
				urlParams: this.$store.state.urlParams,
				totalPrice: 0,
				orderNum: 0,
				loading: false,
				defaultIndex: [0],
				pageParams: {
					pageNum: 1,
					pageSize: 10,
				},
				total: 0,
				options: {},
				realAuthInfo: null,
				JTH5_code_switch: false,
			};
		},
		async onLoad(options) {
			this.options = options
			this.options.brand = decodeURI(options.brand)
			this.options.name = decodeURI(options.name)
			this.getCallinfoInfo(this.options);
			this.JTH5_code_switch = await this.getDictOne("JTH5_code_switch") == 1;
			this.realAuthInfo = await this.realAuthDetail();
		},
		async onShow() {
			// this.realAuthInfo = await this.realAuthDetail();
			// if (!this.realAuthInfo || [3, 4].includes(this.realAuthInfo.status)) {
			// 	this.$refs.popupCustomVue.init();
			// }
		},
		//触底加载
		onReachBottom() {
			console.log("触底");
			if (this.dataSource.length < this.total) {
				this.pageParams.pageNum += 1
				this.getList()
			} else {

			}
		},
		methods: {
			leftClick() {
				webUni.postMessage({
					data: {
						type: "back",
						data: []
					},
				})
				uni.removeStorageSync("Info")
				uni.removeStorageSync("urlParams")
				uni.removeStorageSync("wxUserInfo")
			},
			//查询实名信息
			async realAuthDetail() {
				let result = await this.api.realAuthDetail();
				return result.data.data;
			},
			//查询字典
			async getDictOne(code) {
				let res = await this.api.getDictOne(code);
				return res.data.data.dictValue;
			},
			/**
			 * 查询账户信息
			 */
			getCallinfoInfo(options) {
				let params = {
					...options
				}
				uni.setStorageSync("urlParams", options)
				this.api.getCallinfoInfo(params).then(res => {
					console.log(res);
					if (!res.data.data.erpCode) {
						uni.showModal({
							title: '提示',
							content: '未查询到相关信息！！',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
									webUni.postMessage({
										data: {
											type: "back",
											data: []
										},
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
					this.Info = res.data.data;
					uni.setStorageSync("Info", res.data.data);
					uni.setStorageSync("wxUserInfo", {
						openId: res.data.data.openId,
						unionId: res.data.data.unionId,
						wxNickName: res.data.data.wxNickName,
					});
				})
			},
			//跳转认证页面
			toAuth() {
				if (this.JTH5_code_switch) {
					uni.navigateTo({
						url: "/pages/authentication/index"
					})
				} else {
					uni.navigateTo({
						url: "/pages/realNameAuth/index"
					})
				}
			},
			//总价和个数
			selectOrderAndAmount() {
				this.api.selectOrderAndAmount({
					...uni.getStorageSync("urlParams"),
					...this.modelValue
				}).then(res => {
					console.log(res);
					this.orderNum = res.data.data.orderNum
					this.totalPrice = Math.abs(res.data.data.orderAmount)
				})
			},
			getList(isEmpty = false) {
				this.loading = true;
				let params = {
					...uni.getStorageSync("urlParams"),
					...this.pageParams
				}
				console.log(params);
				this.api.consumptionHistory({
					...params,
					...this.modelValue
				}).then(res => {
					console.log(res);
					this.loading = false;
					this.total = res.data.total;
					if (isEmpty) {
						this.dataSource = [];
					}
					if (this.dataSource.length < this.total) {
						this.dataSource = this.dataSource.concat(res.data.rows);
					} else {

					}
				})
			},
			showPop(type) {
				if (type == 'year') {
					let arr = [];
					for (let i = 1970; i < new Date().getFullYear() + 15; i++) {
						arr.push({
							label: i,
							value: i
						});
					}
					this.defaultIndex = [new Date().getFullYear() - 1970]
					this.columns3 = [arr];
				}
				this.show = type;
			},
			handleConfirm(type, e) {
				// this.loading = true
				this.model[type] = e.value[0].label
				this.modelValue[type] = e.value[0].value
				this.show = null;
				this.pageParams = {
					pageNum: 1,
					pageSize: 10,
				}
				this.getList(true);
				this.selectOrderAndAmount();
			},
			async next() {
				console.log(this.modelValue);
				if (!this.model.payType) {
					uni.$u.toast("请选择支付类型")
					return;
				}
				if (!this.model.consumeType) {
					uni.$u.toast("请选择消费类型")
					return;
				}
				if (!this.model.year) {
					uni.$u.toast("请选择年份")
					return;
				}
				if (!this.model.quarter) {
					uni.$u.toast("请选择季度")
					return;
				}
				this.realAuthInfo = await this.realAuthDetail();
				if (!this.realAuthInfo || [3, 4].includes(this.realAuthInfo.status)) {
					return uni.$u.toast("开票需完成实名认证，请您先实名认证！");
				}
				// return
				uni.showLoading({
					title: "加载中...",
					mask: true,
				})
				this.api.getFapiaoInfo({
					...uni.getStorageSync("urlParams"),
					...this.modelValue
				}).then(res => {
					uni.hideLoading();
					if (res.data.code == 200 && res.data.data) {
						uni.navigateTo({
							url: `/pages/applyInvoice/index?params=${JSON.stringify(this.modelValue)}&obj=${JSON.stringify(res.data.data)}`
						})
					}
				})
			},
			/**
			 * 开票记录
			 */
			toList() {
				uni.navigateTo({
					url: "/pages/invoiceRecords/index"
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f6f6f6;
	}

	.page {
		margin: 20rpx;
	}

	// ::v-deep .u-status-bar {
	// 	height: 80rpx !important;
	// }

	.content {
		width: 100%;
		box-sizing: border-box;

		&_top {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 28rpx 24rpx;
			box-sizing: border-box;
			border-radius: 16rpx;
			background-color: #152a8b;

			&_left {
				display: flex;
				align-items: center;

				.text {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #ffffff;
					margin-left: 10rpx;
				}
			}
		}

		&_box {
			width: 100%;
			background-color: #fff;
			margin-top: 20rpx;
			padding: 20rpx 24rpx;
			box-sizing: border-box;
			border-radius: 16rpx;

			.item {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				padding: 30rpx 10rpx;
				margin: 15rpx 0rpx;

				&_left {
					display: flex;
					flex-direction: column;
					align-items: flex-start;

					.name {
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
					}

					.time {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 22rpx;
						color: #999999;
						margin-top: 10rpx;
					}
				}

				.price {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #ff1212;
				}
			}
		}

		.tip {
			display: block;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 22rpx;
			color: #ff1212;
			margin-top: 28rpx;
			margin-bottom: 40rpx;
		}

		.placeholder {
			text-align: right;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #999999;
		}
	}

	.bottom {
		width: 100vw;
		position: fixed;
		bottom: 0;
		left: 0;
		box-shadow: 0rpx -6rpx 16rpx rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 20rpx;
		// padding-bottom: 30rpx;
		box-sizing: border-box;
		background-color: #ffffff;

		&_left {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;

			.price {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #ff1212;
			}
		}

		.btn {
			line-height: unset;
			margin: 0;
			padding: 23rpx 91rpx;
			background-color: #152a8b;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #ffffff;

			&::after {
				border: unset;
			}
		}
	}

	.bg-color {
		background-color: #ccc;
		border-radius: 10rpx;
	}

	.shimingTips {
		background-color: #F8DD02;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 10rpx;
		// margin-top: 20rpx;
		font-size: 22rpx;
		font-weight: bold;

		.shimingTips-left {}

		&-right {
			display: flex;
			align-items: center;
			color: #15298C;
		}
	}
</style>